<template>
  <div>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
      :model="where"
      label-width="77px"
      class="ele-form-search"
      @keyup.enter.native="reload"
      @submit.native.prevent>
      <el-row :gutter="15">
        <el-col :lg="6" :md="12">
          <div class="ele-form-actions">
            <el-button
              type="primary"
              @click="reload"
              icon="el-icon-search"
              class="ele-btn-icon">查询
            </el-button>
            <!--              <el-button @click="reset">重置</el-button>-->
          </div>
        </el-col>
      </el-row>
    </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :datasource="url"
        :columns="columns"
        :where="where"
        height="calc(100vh - 315px)">
        <template slot="action" slot-scope="{row}">
          <el-link
            type="info"
            slot="reference"
            :underline="false"
            icon="el-icon-view"
            @click="showDetail(row)"
          >查看详情
          </el-link>
        </template>
      </ele-pro-table>
    </el-card>
    <el-dialog
      title="MIFI 设备详情"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="handleClose">
      <el-form
        :model="detailWhere"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reloadDetail"
        @submit.native.prevent>
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="IMEI号:">
              <el-input
                v-model="detailWhere.facilityImei"
                placeholder="请输入IMEI号"
                clearable/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="状态筛选:">
             <el-select v-model="detailWhere.mark">
               <el-option :value="1" label="成功">

               </el-option>
               <el-option :value="0" label="失败">

               </el-option>
             </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                @click="reloadDetail"
                icon="el-icon-search"
                class="ele-btn-icon">查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <ele-pro-table
        v-if="dialogVisible"
        ref="detailTable"
        :datasource="detailUrl"
        :columns="detailColumns"
        :where="detailWhere"
        height="calc(100vh - 315px)">
      </ele-pro-table>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'device-log',
  data(){
    return{
      url: '/mf-network-snapshoot/getOpWebFacilityLogList',
      detailUrl:'/mf-facility/getWebFacilityLog',
      // 表格列配置
      columns: [
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          fixed: "left",
          label: '序号',
        },
        {
          prop: 'opUuid',
          label: '操作id',
          minWidth: 100,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'updateTime',
          label: '操作时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'facilityOpnInstruct',
          label: '操作类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'mark',
          label: '数量',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
        },
        {
          prop: 'networkSnapshoot',
          label: '操作内容',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
        },
        {
          prop: 'createUserName',
          label: '操作账号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'createTime',
          label: '操作时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160,
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 120,
          align: 'center',
          resizable: false,
          slot: 'action',
          fixed: "right"
        }
      ],
      detailColumns:[
        {
          columnKey: 'index',
          type: 'index',
          width: 45,
          align: 'center',
          fixed: "left",
          label: '序号',
        },
        {
          prop: 'facilityOpnId',
          label: '操作id',
          minWidth: 100,
          align: 'center',
          showOverflowTooltip: true,
        },
        {
          prop: 'facilityImei',
          label: 'IMEI号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'facilityOpnInstruct',
          label: '操作类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 100
        },
        {
          prop: 'mark',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
          formatter: (row, column, cellValue) => {
            return row.mark==1?'成功':'失败';
          }
        },
        {
          prop: 'facilityOpnDetail',
          label: '操作内容',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 130,
        },
        {
          prop: 'createTime',
          label: '操作时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160,
        },
        {
          prop: 'updateTime',
          label: '完成时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 160,
        },
      ],
      // 表格搜索条件
      where: {},
      detailWhere:{},
      dialogVisible:false,//弹窗
    }
  },
  created() {

  },
  methods:{
    showDetail(row){
      this.detailWhere = {
        opUuid:row.opUuid
      }
      this.dialogVisible = true
    },
    reset() {
      this.detailWhere = {};
      this.reloadDetail();
    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload({where: this.where});
    },
    reloadDetail(){
      this.$refs.detailTable.reload({where: this.detailWhere});
    },
    handleClose(){
      this.dialogVisible = false
    },
  }
}
</script>
